<html>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .page {
      display: flex;
      position: relative;
      min-height: 100vh;
    }
    .circle {
      display: inline-flex;
      position: absolute;
      border: 6px solid rgb(214, 208, 16);
      width: 100px;
      height: 100px;
      background-color: transparent;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .point {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 20px;
      height: 20px;
      background-color: aqua;
      transform: translate(-50%, -50%);
      cursor: move;
      z-index: 1;
    }
    .circlewrapper {
      position: absolute;
      top: 100px;
      left: 100px;
    }
    .drager {
      position: absolute;
      width: 20px;
      height: 20px;
      top: calc(50% - 10px);
      right: -12px;
      background-color: red;
      border-radius: 20px;
      cursor: move;
    }
    .pointer {
      position: absolute;
      width: 0;
      height: 0;
      border: 12px solid;
      border-color: transparent transparent transparent rgb(74, 6, 125);
      top: calc(50% - 12px);
      right: 0px;
    }
    .fixed-bottom {
      position: fixed;
      bottom: 20px;
      left: 20px;
    }
  </style>
  <body>
    <div class="page">
      <span class="point" id="point"> </span>
      <span class="circlewrapper" id="circlewrapper">
        <span class="circle" id="circle">
          <span class="pointer"> </span>
          <span class="drager" id="drager"> </span>
        </span>
      </span>

      <div class="fixed-bottom">
        <div id="mousePosition"></div>
        <div id="mousePosition"></div>
      </div>
    </div>

    <script>
      let enableDragDir = false;
      let enableDragPosition = false;
      let circle = document.getElementById("circle");
      let drager = document.getElementById("drager");
      let point = document.getElementById("point");
      let circlewrapper = document.getElementById("circlewrapper");
      point.addEventListener("mousedown", () => {
        enableDragPosition = true;
      });
      point.addEventListener("mouseup", () => {
        enableDragPosition = false;
      });
      drager.addEventListener("mousedown", () => {
        enableDragDir = true;
      });
      document.addEventListener("mouseup", () => {
        enableDragDir = false;
        enableDragPosition = false;
      });

      function getRotatedElementCenter() {
        var rect = circle.getBoundingClientRect(); // 获取元素的边界框

        var centerX = rect.left + rect.width / 2; // 计算中心点的水平位置
        var centerY = rect.top + rect.height / 2; // 计算中心点的垂直位置

        var browserLeft =
          window.pageXOffset || document.documentElement.scrollLeft; // 浏览器左边缘距离文档左边缘的距离
        var browserTop =
          window.pageYOffset || document.documentElement.scrollTop; // 浏览器上边缘距离文档上边缘的距离

        var relativeX = centerX - browserLeft; // 计算中心点相对于浏览器左边缘的水平位置
        var relativeY = centerY - browserTop; // 计算中心点相对于浏览器上边缘的垂直位置

        return { x: relativeX, y: relativeY };
      }

      function calculateAngle(x1, y1, x2, y2) {
        var deltaX = x2 - x1; // 计算水平距离
        var deltaY = y2 - y1; // 计算垂直距离

        var angleRad = Math.atan2(deltaY, deltaX); // 使用反正切函数计算弧度
        var angleDeg = angleRad * (180 / Math.PI); // 弧度转换为角度

        return angleDeg;
      }

      document.addEventListener("mousemove", function (event) {
        var mouseX = event.clientX; // 鼠标相对于视口的水平位置
        var mouseY = event.clientY; // 鼠标相对于视口的垂直位置

        var browserLeft =
          window.pageXOffset || document.documentElement.scrollLeft; // 浏览器左边缘距离文档左边缘的距离
        var browserTop =
          window.pageYOffset || document.documentElement.scrollTop; // 浏览器上边缘距离文档上边缘的距离

        var relativeX = mouseX - browserLeft; // 鼠标相对于浏览器左边缘的水平位置
        var relativeY = mouseY - browserTop; // 鼠标相对于浏览器上边缘的垂直位置

        const { x, y } = getRotatedElementCenter();

        const angle = calculateAngle(x, y, relativeX, relativeY);
        document.getElementById(
          "mousePosition"
        ).innerText = `Mouse Position: ${relativeX}, ${relativeY}, ${x} - ${y}, 夹角${angle}`;
        if (enableDragDir) {
          circle.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
        }
        if (enableDragPosition) {
          const { width, height } = point.getBoundingClientRect();
          point.style.left = `${relativeX}px`;
          point.style.top = `${relativeY}px`;
          circlewrapper.style.left = `${relativeX}px`;
          circlewrapper.style.top = `${relativeY}px`;
        }
      });
    </script>
  </body>
</html>
